<template>
	<view class="container"
		style="background-image: url('../../../static/icon/bg_main.png');background-repeat: no-repeat;">
		<!--头部-->
		<view style="display: flex;">
			<text class="zzmc">站点名称</text>
			<image src="../../../static/icon/icon_ploy.png" style="width: 14px;height: 9px;;flex-shrink: 0;    margin-top: 20rpx;margin-left: 10rpx;"></image>
			<image src="../../../static/icon/icon_day.png"
				style="width: 24px;height: 24px;flex-shrink: 0;position: absolute;right: 30rpx;"></image>
		</view>
		<!--搜索-->
		<view class="search-container">
			<input class="search-input" type="text" placeholder="请输入服务内容" style="">
			<uni-icons type="search" size="16" class="searcIcon"></uni-icons>
			</input>


		</view>
		<!--头部模块-->
		<view class="twoModeleClass">
			<view v-for="(item,index) in twoModuleList" class="twoModeleItem">
				<image :src="item.icon" class="twoModuleIconItem" @click="jumpIntent(item.path)"></image>
				<text class="twoModeleTextItem">{{item.name}}</text>
			</view>

		</view>
		<view class="bottom marTop">
			<image src="../../../static/icon/icon_good.png" class="otherModuleImgItem"></image>
			<text class="textTiltle">服务精选</text>

		</view>
		<!--达人列表-->
		<view class="personListClass">
			<view v-for="(item,index) in fwModuleList" @click="choosePerson(item)">
				<!--图片人像部分-->
				<view :style="{backgroundImage:'url(' + item.img + ')'}" class="personImgItem">

					<view
						style="background-image: url('../../../static/icon/icon_state.png');background-repeat: no-repeat; background-position: center;"
						class="child-view_top" v-if="item.img!=''">
						<text class="stateTextItem"><text style="color: #4BFE75;margin-left:-5rpx">・
							</text>{{item.state==1?'空闲':'忙碌'}}</text>
					</view>
					<view
						style="background-image: url('../../../static/icon/bg_reg.png');background-repeat: no-repeat; background-position: center;"
						class="child-view" v-if="item.img!=''">
						<text class="typeFont">{{item.type}}</text>
					</view>
				</view>
				<!--文字描述部分-->
				<view class="personTextItem">
					<text class="nameItem">{{item.name}}</text>
					<text class="contentItem">{{item.content}}</text>
					<text class="wagesItem">{{item.wages}}<text class="timeItem" v-if="item.wages>0">/时</text></text>
					<view style="height: 20rpx;"></view>
				</view>


			</view>

		</view>
	</view>
</template>
import uniIcons from '../../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
<script>
	export default {
		props: {

		},
		data() {
			return {
				twoModuleList: [{
					name: '健身达人',
					icon: '../../../static/icon/icon_jsdr.png',
					path: ''
				}, {
					name: '瑜伽达人',
					icon: '../../../static/icon/icon_yjdr.png',
					path: ''
				}, {
					name: '空调维修',
					icon: '../../../static/icon/icon_ktwx.png',
					path: ''
				}, {
					name: '羽毛达人',
					icon: '../../../static/icon/icon_ymdr.png',
					path: '',
				}, {
					name: '游泳教练',
					icon: '../../../static/icon/icon_swim.png',
					path: '',
				}, {
					name: '更多服务',
					icon: '../../../static/icon/icon_fwxy.png',
					path: '',
				}],
				fwModuleList: [{
						name: '小雨',
						type: '健身达人',
						content: '颜值和身材无可挑剔，一对一提供服务',
						wages: '60',
						state: 1,
						img: '../../../static/icon/img_girl.png'
					},
					{
						name: '小雨',
						type: '瑜伽达人',
						content: '颜值和身材无可挑剔，一对一提供服务',
						wages: '60',
						state: 1,
						img: '../../../static/icon/img_girl.png'
					},
					{
						name: '小雨',
						type: '瑜伽达人',
						content: '颜值和身材无可挑剔，一对一提供服务',
						wages: '60',
						state: 1,
						img: '../../../static/icon/img_girl.png'
					},
					{
						name: '小雨',
						type: '瑜伽达人',
						content: '颜值和身材无可挑剔，一对一提供服务',
						wages: '60',
						state: 1,
						img: '../../../static/icon/img_girl.png'
					},
					{
						name: '小雨',
						type: '瑜伽达人',
						content: '颜值和身材无可挑剔，一对一提供服务',
						wages: '60',
						state: 1,
						img: '../../../static/icon/img_girl.png'
					}
				], //name:姓名,type:技工类型,content:描述,wages:'费用/小时'，state:状态,img:照片

			}
		},
		onLoad() {
			if (!this.isLengthEven(this.fwModuleList)) {
				this.fwModuleList.push({
					name: '',
					type: '',
					content: '',
					wages: '',
					state: 0,
					img: ''
				})
			}
			console.log(this.isLengthEven(this.fwModuleList))
		},
		methods: {
			isLengthEven(list) {
				return list.length % 2 === 0;
			},
			choosePerson(item){
				uni.navigateTo({
					// url:'/pages/module/expertDetails/expertDetail/expertDetail',
					url:'/pages/module/coupon/couponList/couponList'
				})
			}

		}
	}
</script>

<style>
	.container {
		background-color: #FFFDFC;
		padding: 20px;

	}

	.twoModeleClass {

		flex-wrap: wrap;
		column-count: 3;
		text-align: center;
		padding: 20rpx;
	}

	.twoModeleItem {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
	}

	.twoModeleTextItem {
		margin-left: 20rpx;
	}

	.twoModuleIconItem {
		width: 28px;
		height: 28px;
	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: #FFF;
		padding: 10px;
		border-radius: 5px;

		outline: none;
		opacity: 0.53;
		background: #FFF;
		backdrop-filter: blur(6.849999904632568px);
		margin-top: 30rpx;
	}

	.search-input {
		flex: 1;
		padding: 15rpx;
		position: relative;
		padding-left: 30rpx;


	}

	.search-btn {
		padding: 10px;
		margin-left: 10px;
		background-color: #4caf50;
		color: white;
		border-radius: 5px;
		text-align: center;
		cursor: pointer;
	}

	.bottom {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.otherModuleText {
		padding-left: 20rpx;
		color: var(---, #040B29);
		font-family: "PingFang SC";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 16px;
		/* 133.333% */
	}

	.otherModuleImgItem {
		width: 22px;
		height: 22px;
		flex-shrink: 0;


	}

	.textTiltle {
		color: var(---, #040B29);
		font-family: "Alibaba PuHuiTi";
		font-size: 16px;
		font-style: normal;
		font-weight: 800;
		line-height: normal;
		margin-left: 20rpx;
	}

	.personListClass {
		flex-wrap: wrap;
		column-count: 2;
		text-align: center;
		padding: 10rpx;
	}

	.personImgItem {
		width: 167px;
		height: 166px;
		flex-shrink: 0;
		position: relative;
		background-repeat: no-repeat;
		background-position: center;
	}

	.child-view {
		width: 86px;
		height: 20px;
		position: absolute;
		/* 设置子元素为绝对定位 */
		bottom: 0;
		/* 子元素定位到父元素的底部 */
		right: 0;
		/* 子元素定位到父元素的右边 */

	}

	.typeFont {
		color: #FFF;

		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: 16px;
		margin-left: 50rpx;
	}

	.nameItem {
		color: var(---, #040B29);
		font-family: "Alibaba PuHuiTi";
		font-size: 14px;
		font-style: normal;
		font-weight: 700;
		line-height: 16px;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.wagesItem {
		color: #FEA442;

		font-family: DIN;
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: 16px;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.contentItem {
		color: var(---, #929397);
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 16px;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.personTextItem {
		display: inline-grid;
		text-align: left;
	}

	.timeItem {
		color: var(---, #040B29);
		font-family: "Alibaba PuHuiTi";
		font-size: 12px;
		font-style: normal;
		font-weight: 800;
		line-height: 16px;
		/* 133.333% */
	}

	.child-view_top {
		width: 40px;
		height: 22px;
		position: absolute;
		/* 设置子元素为绝对定位 */
		top: 10rpx;
		/* 子元素定位到父元素的底部 */
		left: 10rpx;
		/* 子元素定位到父元素的右边 */
	}

	.stateTextItem {
		color: #FFF;

		font-family: "Alibaba PuHuiTi";
		font-size: 10px;
		font-style: normal;
		font-weight: 400;
		line-height: 16px;
		/* 160% */
	}

	.zzmc {
		color: var(---, #040B29);
		font-family: "Alibaba PuHuiTi";
		font-size: 18px;
		font-style: normal;
		font-weight: 900;
		line-height: normal;
	}
	.searcIcon{
		position: absolute;
		left: 10rpx;
	}
</style>